<template>
  <div class="order_limit">
    <el-form :model="form" inline>
      <el-form-item label="规则名称">
        <el-input v-model="form.name" @keyup.enter.native="getList"></el-input>
      </el-form-item>
      <el-form-item label="区域金额">
        <el-input v-model="form.flowPrice" @keyup.enter.native="getList"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="getList">搜索</el-button>
        <el-button type="danger" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="newlyBuild" v-hasPermi="['order:minimumSettlement:add']">新建</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-edit" size="mini" @click="handleDeliveryOrderForm" v-hasPermi="['order:minimumSettlement:delivery:order:detail']">起配金额</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns">
      </right-toolbar>
    </el-row>

    <el-table border v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="规则名称" width="200px" align="center"> </el-table-column>
      <el-table-column prop="flowPrice" label="包邮金额" width="100px" align="center">
      </el-table-column>
      <el-table-column prop="freightFlowPrice" label="非包邮金额" width="100px" align="center">
      </el-table-column>
      <el-table-column prop="freightPrice" label="邮费金额" width="100px" align="center">
      </el-table-column>
      <el-table-column label="区域" align="center">
        <template slot-scope="scope">
          <el-tag v-for="(tag,index) in scope.row.minimumSettlementRegionVOList" :key="index"
            :type="tag.regionNamePath"> {{tag.regionNamePath}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="250px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editRow(scope.row)">编辑</el-button>
          <el-button type="success" size="mini" @click="region(scope.row)">区域</el-button>
          <el-button type="danger" size="mini" @click="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="form.total>0" :total="form.total" :page.sync="form.pageNum"
      :limit.sync="form.pageSize" @pagination="getList" />

    <!-- 新建、修改 -->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag v-loading='loading1' :title="title" :visible.sync="dialogVisible" width="40%">
      <el-form :model="tableDataForm" label-width="100px">
        <el-form-item prop="name" label="规则名称"
          v-if="confirmTitle === '新建' || confirmTitle === '编辑'">
          <el-input v-model="tableDataForm.name" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item prop="flowPrice" label="包邮金额"
          v-if="confirmTitle === '新建' || confirmTitle === '编辑'">
          <el-input v-model="tableDataForm.flowPrice" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item prop="freightFlowPrice" label="非包邮金额"
          v-if="confirmTitle === '新建' || confirmTitle === '编辑'">
          <el-input v-model="tableDataForm.freightFlowPrice" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item prop="freightPrice" label="邮费金额"
          v-if="confirmTitle === '新建' || confirmTitle === '编辑'">
          <el-input v-model="tableDataForm.freightPrice" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="区域" v-if="confirmTitle === '区域' || confirmTitle === '编辑'">
          <el-tag v-for="(tag,index) in tableDataFormRegionList" :key="index" closable
            @close="closeing(tag)">
            <!-- :closable="title==='新建'?false:true" 删除 -->
            {{tag.regionNamePath}}
          </el-tag>
        </el-form-item>
        <el-form-item label="选择区域" v-if="confirmTitle === '区域' || confirmTitle === '编辑'">
          <!-- <el-tree ref="tree" :data="list" :props="defaultProps" show-checkbox node-key="id"
            :check-strictly="true" :check-on-click-node="true"> </el-tree> -->
          <el-cascader ref="cascader" v-model="checkedNodes" :options="list" v-loading="loading1"
            :props="props" collapse-tags clearable @change="getChecked">
          </el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelModify">取 消</el-button>
        <el-button type="primary" @click="dialogVisible1 = true">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 确认框 -->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag :title="confirmTitle" :visible.sync="dialogVisible1" width="30%">
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="confirmBtn">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 订单起配金额配置 -->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag v-loading='loading1' title="最低提单金额" :visible.sync="deliveryOrderQuotaFlag" width="40%">
      <el-form :model="deliveryOrderQuotaForm" label-width="100px">
        <el-divider content-position="left">整单最低提单金额</el-divider>
        <el-form-item prop="name" label="整单金额">
          <el-input v-model="deliveryOrderQuotaForm.flowPrice"></el-input>
        </el-form-item>
        <el-form-item prop="tips" label="提示语">
          <el-input v-model="deliveryOrderQuotaForm.tips"></el-input>
        </el-form-item>

        <el-divider content-position="left">西药最低提单金额</el-divider>
        <el-form-item label="是否启用">
          <el-radio-group v-model="deliveryOrderQuotaForm.categorizes.NORMAL_MEDICINE.enable">
            <el-radio-button label="true">启用</el-radio-button>
            <el-radio-button label="false">禁用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="西药金额">
          <el-input v-model="deliveryOrderQuotaForm.categorizes.NORMAL_MEDICINE.flowPrice"></el-input>
        </el-form-item>
        <el-form-item label="提示语">
          <el-input v-model="deliveryOrderQuotaForm.categorizes.NORMAL_MEDICINE.tips"></el-input>
        </el-form-item>

        <el-divider content-position="left">中药最低提单金额</el-divider>
        <el-form-item label="是否启用">
          <el-radio-group v-model="deliveryOrderQuotaForm.categorizes.CHINESE_MEDICINE.enable">
            <el-radio-button label="true">启用</el-radio-button>
            <el-radio-button label="false">禁用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="中药金额">
          <el-input v-model="deliveryOrderQuotaForm.categorizes.CHINESE_MEDICINE.flowPrice"></el-input>
        </el-form-item>
        <el-form-item label="提示语">
          <el-input v-model="deliveryOrderQuotaForm.categorizes.CHINESE_MEDICINE.tips"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deliveryOrderQuotaFlag = false">取 消</el-button>
        <el-button type="primary" @click="submitDeliveryOrderForm" v-hasPermi="['order:minimumSettlement:delivery:order:save']">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMinSettlementMoneyList, addMinSettlementMoneyList, updMinSettlementMoneyList, delMinSettlementMoneyList,
  getConfigureRegionList, delConfigureRegionList, addsConfigureRegionList, getDeliveryOrderQuota, saveDeliveryOrderQuota
} from '@/api/order/limit.js'

import { administrativeDivision } from '@/api/limitSale/index.js'

export default {
  name: 'Limit',
  data () {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 搜索
      form: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      loading: true,
      loading1: true,
      tableData: [],
      // 新建 编辑
      dialogVisible: false,
      props: {
        multiple: true,
        children: 'children',
        value: 'id',
        label: 'name',
        checkStrictly: true,
        emitPath: true
      },
      list: [],
      // 确认框
      dialogVisible1: false,
      tableDataForm: {},
      tableDataFormRegionList: [],
      title: '',
      confirmTitle: '',
      ROW: {},
      rowId: '',
      checkedNodes: [],
      // 显示搜索条件
      showSearch: true,
      // 列信息
      columns: [],
      deliveryOrderQuotaForm: {
        categorizes: {
          enable: true,
          NORMAL_MEDICINE:{
            flowPrice: 199,
            tips: '',
            enable: true
          },
          CHINESE_MEDICINE:{
            flowPrice: 199,
            tips: '',
            enable: true
          }
        }
      },
      deliveryOrderQuotaFlag: false,
    }
  },
  created () {
    this.getList()
    administrativeDivision().then(res => {
      if (res.code === 200) {
        this.list = this.handleTree(res.data, 'id')[0].children
        this.loading1 = false
      }
    })
  },
  methods: {
    getList () {
      getMinSettlementMoneyList(this.form).then(res => {
        if (res.code === 200) {
          this.tableData = res.rows
          this.loading = false
        }
      })
    },
    // 重置
    reset () {
      this.form = { total: 0, pageNum: 1, pageSize: 10, }
      this.getList()
    },
    // 新建
    newlyBuild () {
      this.tableDataForm = {}
      this.dialogVisible = true
      this.title = "新建"
      this.confirmTitle = '新建'
    },
    // 编辑
    editRow (row) {
      this.ROW = row
      this.rowId = row.id
      this.tableDataForm = row
      this.get()
      this.title = "编辑"
      this.confirmTitle = "编辑"
      this.dialogVisible = true
      this.loading1 = true
    },
    // 删除
    deleteRow (row) {
      this.ROW = row
      this.title = "删除"
      this.confirmTitle = '确认删除吗'
      this.dialogVisible1 = true
    },
    // 区域
    region (row) {
      if (!row.minimumSettlementRegionVOList) {
        this.rowId = row.id
        this.ROW = row
        this.title = "区域"
        this.confirmTitle = '区域'
        this.dialogVisible = true
      }
    },
    // 确认框 确认
    confirmBtn () {
      if (this.confirmTitle === '新建') {
        // addMinSettlementMoneyList({ flowPrice: this.tableDataForm.flowPrice, name: this.tableDataForm.name }).then(res => {
        addMinSettlementMoneyList(this.tableDataForm).then(res => {
          if (res.code === 200) {
            this.dialogVisible = false
            this.dialogVisible1 = false
            this.getList()
          }
        })
      }
      if (this.confirmTitle === '确认删除吗') {
        delMinSettlementMoneyList(this.ROW.id).then(res => {
          if (res.code === 200) {
            this.dialogVisible1 = false
            this.getList()
          }
        })
      }
      if (this.confirmTitle === '编辑') {
        // updMinSettlementMoneyList(this.ROW.id, { name: this.tableDataForm.name, flowPrice: this.tableDataForm.this.tableDataForm }).then(res => {
        updMinSettlementMoneyList(this.ROW.id, this.tableDataForm).then(res => {
          if (res.code === 200) {
            addsConfigureRegionList(this.ROW.id, this.tableDataFormRegionList).then(res => {
              if (res.code === 200) {
                this.tableDataFormRegionList = []
                this.checkedNodes = []
                this.dialogVisible = false
                this.dialogVisible1 = false
                this.getList()
              }
            })
          }
        })
      }
      if (this.confirmTitle === '区域') {
        // console.log(this.$refs.cascader.getCheckedNodes())
        addsConfigureRegionList(this.ROW.id, this.tableDataFormRegionList).then(res => {
          if (res.code === 200) {
            this.dialogVisible = false
            this.dialogVisible1 = false
            this.tableDataFormRegionList = []
            this.checkedNodes = []
            this.getList()
          }
        })
      }
    },
    // 取消 新建 、修改
    cancelModify () {
      this.dialogVisible = false
      this.tableDataFormRegionList = []
      this.checkedNodes = []
    },
    // 选中
    getChecked () {
      let nodesInfo = this.$refs.cascader.getCheckedNodes()
      let a = []
      for (const i of nodesInfo) {
        let label = ''
        i.pathLabels.forEach(ele => label += ele)
        a.push({ regionNamePath: label, regionId: i.data.id, regionIdPath: i.data.path + ',' + i.data.id })
      }
      this.tableDataFormRegionList = a
    },
    // 获取行 内容
    get () {
      getConfigureRegionList(this.ROW.id).then(res => {
        if (res.code === 200) {
          for (const i of res.rows) {
            this.checkedNodes.push(i.regionId)
          }
          this.tableDataFormRegionList = res.rows
          this.loading1 = false
        }
      })
    },
    // 删除标签
    closeing (val) {
      this.tableDataFormRegionList = this.tableDataFormRegionList.filter(item => {
        return item.regionIdPath !== val.regionIdPath
      })
      this.checkedNodes = this.checkedNodes.filter(item => {
        return item !== val.regionId
      })
      delConfigureRegionList(val.id).then(res => {
        if (res.code === 200) {
        }
      })

      // const length = this.tableDataFormRegionList.length

      // if (length === this.tableDataFormRegionList.length + 1) {
      // delConfigureRegionList(this.ROW.id).then(res => {
      //   console.log(res)
      //   if (res.code === 200) {
      //     this.dialogVisible = false
      //     this.getList()
      //   }
      // })
      // }
    },
    handleDeliveryOrderForm(){
      getDeliveryOrderQuota().then(res=>{
        this.deliveryOrderQuotaForm = res.data
        this.deliveryOrderQuotaFlag = true
      })
    },
    submitDeliveryOrderForm(){
      const _this = this
      this.$modal.confirm('确认保存订单起配金额配置吗？').then(function () {
        saveDeliveryOrderQuota(_this.deliveryOrderQuotaForm).then(res=>{
          _this.$modal.msgSuccess("修改成功");
          _this.deliveryOrderQuotaFlag = false
        })
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.order_limit {
  padding: 20px;
}
.newlyBuild {
  margin-bottom: 20px;
}
::v-deep .el-dialog {
  top: 0;
  .el-dialog__body {
    padding: 10px 50px;
  }
}
</style>
